前篇說明 PrimeVue 第四版的搬遷說明，及升版的環境設定。

此篇針對樣式及元件調整進行說明：

1. 調整元件：部分元件名稱更名為較常見的名稱，比如：原先的 Dropdown 改為 Select 選單名稱；Popover取代 OverlayPanel。

   <!-- PrimeVue v3 -->
   <Dropdown v-model="dropdownValue" :options="dropdownValues" optionLabel="name" placeholder="Select" />
   
   <!-- PrimeVue v4 -->
   <Select v-model="selectValue" :options="selectValues" optionLabel="name" placeholder="Select" fluid />
   

2. 部分移除的元件其方法改採用其他元件整合或取代。

   比如 Accordion 原本的元件內容改使用新的 AccordionHeader 及 AccordionContent 元件。

   <!-- PrimeVue v3 -->
   <Accordion :activeIndex="0">
       <AccordionTab header="Header I">
           <p class="m-0">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
               consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
               laborum.
           </p>
       </AccordionTab>
   </Accordion>
   
   <!-- PrimeVue v4 -->
   <Accordion value="0">
       <AccordionPanel value="0">
           <AccordionHeader>Header I</AccordionHeader>
           <AccordionContent>
               <p class="m-0">
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                   consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
               </p>
           </AccordionContent>
       </AccordionPanel>
   </Accordion>
   

3. 部分樣式移除可採用元件的屬性取代，比如：移除 .p-fluid，新增 fluid 屬性使元件加上後其寬度可自適應延伸到其父層的寬度。

   <!-- PrimeVue v3 -->
   <div class="p-fluid">
       <InputText type="text" placeholder="Default"></InputText>
   </div>
   
   <!-- PrimeVue v4：加入 fluid 屬性 -->
   <InputText type="text" placeholder="Default" fluid></InputText>
   

   PrimeVue v3 .p-fluid 使用：

   

4. 部分元件或樣式移除；或針對特定元件的優化。

   經由 PrimeCLT 工具可使大多數的樣式轉換成 tailwindCSS 樣式，在官方文件中說明仍有部分樣式須視需求自行調整，以下簡單彙整有觀察到的樣式對照：

   • .field 改為 .mb-4 …
   • .field > label 改為 .inline-block.mb-2
   • .field-checkbox 及 .field-radiobutton 改為 .flex.items-center

5. 部分元件的 api 調整須再參考官方文件，比如： pt 在指定到 datatable 的標題，將 head 上的標題文字置中：

   <!-- PrimeVue v3 + PrimeFlex-->
   <Column :pt="{ headerContent: 'justify-content-center' }" />
   
   <!-- PrimeVue v4 + tailwindCSS -->
   <Column :pt='{ columnHeaderContent: 'justify-center' }' />
   

6. 在深色模式及切換設定：請參考 Dark Mode 設定

7. 在主題色樣式及切換設定：請參考 theme 設定

參考連結：

1. https://primevue.org/guides/primeflex
2. https://primevue.org/guides/migration/v4/